<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- <div id="app"></div> -->
  <script>
    window.onload = function () {
      const config = {
        color: "rgba(151, 168, 190)",
        font: "14px serif",
        rotate: (-1 / 6) * Math.PI,
        text: 'Yeoman',
        yOffset: 2
      }
      function setStamp () {
        const canvasEL = document.createElement('canvas')
        const ctx = canvasEL.getContext('2d')
        const fontSize = config.font.replace(/(\d+)(?=px).*/, "$1")
        const text = ctx.measureText(config.text)
        const txtLen = text.width + fontSize * config.yOffset
        canvasEL.width = txtLen * 2
        canvasEL.height = txtLen * 2
        ctx.translate(txtLen, txtLen)
        ctx.rotate(config.rotate)
        ctx.fillStyle = config.color
        ctx.font = config.font
        ctx.fillText(config.text, fontSize * config.yOffset, 0)
      }
      function compositeStamp () {
        const stamp = setStamp();
        const stampLen = stamp.getAttribute("width") / 2;
        const canvasEl = document.createElement("canvas");
        //保证水印可以完全展示
        const len =
          200 * this.config.density > stampLen
            ? 200 * this.config.density
            : stampLen;
        canvasEl.width = len * 2;
        canvasEl.height = len * 2;
        const ctx = canvasEl.getContext("2d");
        ctx.translate(len, len);
        const sinValueByRotate = Math.sin(this.config.rotate);
        const cosValueByRotate = Math.cos(this.config.rotate);

        //  上左
        if (
          sinValueByRotate <= 0 &&
          sinValueByRotate > -1 &&
          cosValueByRotate > 0 &&
          cosValueByRotate <= 1
        ) {
          console.log('test')
          ctx.drawImage(
            stamp,
            stampLen,
            0,
            stampLen,
            stampLen,
            0,
            0,
            stampLen,
            stampLen
          );
          ctx.drawImage(
            stamp,
            stampLen,
            0,
            stampLen,
            stampLen,
            -len,
            -len,
            stampLen,
            stampLen
          );
        }
        // 上右
        if (
          sinValueByRotate < 0 &&
          sinValueByRotate >= -1 &&
          cosValueByRotate <= 0 &&
          cosValueByRotate < 1
        ) {
          ctx.drawImage(
            stamp,
            0,
            0,
            stampLen,
            stampLen,
            0,
            0,
            stampLen,
            stampLen
          );
          ctx.drawImage(
            stamp,
            0,
            0,
            stampLen,
            stampLen,
            -len,
            -len,
            stampLen,
            stampLen
          );
        }
        // 下右
        if (
          sinValueByRotate >= 0 &&
          sinValueByRotate < 1 &&
          cosValueByRotate < 0 &&
          cosValueByRotate >= -1
        ) {
          ctx.drawImage(
            stamp,
            0,
            stampLen,
            stampLen,
            stampLen,
            0,
            0,
            stampLen,
            stampLen
          );
          ctx.drawImage(
            stamp,
            0,
            stampLen,
            stampLen,
            stampLen,
            -len,
            -len,
            stampLen,
            stampLen
          );
        }
        // 下左
        if (
          sinValueByRotate > 0 &&
          sinValueByRotate <= 1 &&
          cosValueByRotate >= 0 &&
          cosValueByRotate < 1
        ) {
          ctx.drawImage(
            stamp,
            stampLen,
            stampLen,
            stampLen,
            stampLen,
            0,
            0,
            stampLen,
            stampLen
          );
          ctx.drawImage(
            stamp,
            stampLen,
            stampLen,
            stampLen,
            stampLen,
            -len,
            -len,
            stampLen,
            stampLen
          );
        }
      }
    }
  </script>
</body>
</html>
